<template>
  <TopNav title="慢性病患者"/>
  <div class="chronic-disease-management-page">
    <!-- 患者信息区域 -->
    <div class="patient-info-section">
      <h2 class="section-title">患者信息</h2>
      <el-form :model="patientForm">
        <el-form-item label="姓名">
          <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="patientForm.age"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="patientForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="慢性病类型">
          <el-select v-model="patientForm.diseaseType">
            <el-option label="糖尿病" value="糖尿病"></el-option>
            <el-option label="高血压" value="高血压"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="患病时长(年)">
          <el-input-number v-model="patientForm.diseaseDuration"></el-input-number>
        </el-form-item>
      </el-form>
    </div>

    <!-- 饮食记录区域 -->
    <div class="diet-record-section">
      <h2 class="section-title">饮食记录</h2>
      <el-table :data="dietRecords" style="width: 100%">
        <el-table-column prop="date" label="日期" width="150"></el-table-column>
        <el-table-column prop="mealType" label="餐别" width="120"></el-table-column>
        <el-table-column prop="foodItems" label="食物种类" width="250"></el-table-column>
        <el-table-column prop="quantity" label="数量" width="120"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
                type="danger"
                @click="deleteDietRecord(row)"
                icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="diet-form">
        <h3 class="form-title">添加饮食记录</h3>
        <el-date-picker
            v-model="newDietRecord.date"
            type="date"
            placeholder="日期"
            class="input-record"
        />
        <el-select
            v-model="newDietRecord.mealType"
            placeholder="餐别"
            class="input-record"
        >
          <el-option label="早餐" value="早餐"></el-option>
          <el-option label="午餐" value="午餐"></el-option>
          <el-option label="晚餐" value="晚餐"></el-option>
        </el-select>
        <el-input
            v-model="newDietRecord.foodItems"
            placeholder="食物种类"
            class="input-record"
        />
        <el-input-number
            v-model="newDietRecord.quantity"
            placeholder="数量"
            class="input-record"
        />
        <el-button
            type="primary"
            @click="addDietRecord"
            :disabled="!newDietRecord.date ||!newDietRecord.mealType ||!newDietRecord.foodItems ||!newDietRecord.quantity"
        >添加记录</el-button>
      </div>
    </div>

    <!-- 营养建议区域 -->
    <div class="nutrition-advice-section">
      <h2 class="section-title">营养建议</h2>
      <p>针对 <span>{{ patientForm.diseaseType }}</span> 患者：</p>
      <p v-if="patientForm.diseaseType === '糖尿病'">
        - 控制碳水化合物摄入，选择低 GI 值食物，如全谷物、豆类等。<br />
        - 适量增加蛋白质摄入，优选瘦肉、鱼类、蛋类等优质蛋白。<br />
        - 控制脂肪摄入，减少饱和脂肪和反式脂肪，增加不饱和脂肪酸。<br />
        - 多吃蔬菜和水果，注意水果的糖分含量，可分多次食用。
      </p>
      <p v-else-if="patientForm.diseaseType === '高血压'">
        - 控制盐摄入，每日不超过 5 克。<br />
        - 增加钾摄入，多食用香蕉、土豆、菠菜等富含钾的食物。<br />
        - 控制体重，保持适当的能量平衡，避免过度肥胖。<br />
        - 适量摄入蛋白质，以植物蛋白为主，搭配适量动物蛋白。
      </p>
      <p>根据您的饮食记录，进一步建议：<span>{{ specificAdvice }}</span></p>
    </div>

    <!-- 指标分析区域（可根据实际需求完善） -->
    <div class="indicator-analysis-section">
      <h2 class="section-title">指标分析（待完善）</h2>
      <p>血糖波动情况：<span>{{ bloodSugarAnalysis }}</span></p>
      <p>血压变化趋势：<span>{{ bloodPressureAnalysis }}</span></p>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
// 患者信息表单数据
const patientForm = ref({
  name: '',
  age: 0,
  gender: '',
  diseaseType: '',
  diseaseDuration: 0
});

// 饮食记录数组
const dietRecords = ref([
  {
    date: '2024-06-01',
    mealType: '早餐',
    foodItems: '燕麦粥、鸡蛋',
    quantity: 1
  },
  {
    date: '2024-06-01',
    mealType: '午餐',
    foodItems: '鸡肉、蔬菜、米饭',
    quantity: 1
  }
]);
// 新饮食记录对象
const newDietRecord = ref({
  date: '',
  mealType: '',
  foodItems: '',
  quantity: 0
});

// 特定营养建议
const specificAdvice = ref('');
// 血糖分析
const bloodSugarAnalysis = ref('');
// 血压分析
const bloodPressureAnalysis = ref('');

// 删除饮食记录
const deleteDietRecord = (row) => {
  const index = dietRecords.value.indexOf(row);
  if (index > -1) {
    dietRecords.value.splice(index, 1);
    ElMessage.success('饮食记录删除成功');
  }
};

// 添加饮食记录
const addDietRecord = () => {
  dietRecords.value.push({...newDietRecord.value });
  newDietRecord.value = {
    date: '',
    mealType: '',
    foodItems: '',
    quantity: 0
  };
  ElMessage.success('饮食记录添加成功');

  // 根据新的饮食记录更新特定营养建议（简单示例）
  if (patientForm.value.diseaseType === '糖尿病') {
    let carbCount = 0;
    dietRecords.value.forEach((record) => {
      if (record.foodItems.includes('米饭') || record.foodItems.includes('粥')) {
        carbCount += record.quantity;
      }
    });
    if (carbCount > 3) {
      specificAdvice.value = '今日碳水化合物摄入量偏高，建议适当减少主食量。';
    } else {
      specificAdvice.value = '饮食结构较为合理，继续保持。';
    }
  } else if (patientForm.value.diseaseType === '高血压') {
    let saltCount = 0;
    dietRecords.value.forEach((record) => {
      if (record.foodItems.includes('咸菜') || record.foodItems.includes('加工肉类')) {
        saltCount += record.quantity;
      }
    });
    if (saltCount > 0) {
      specificAdvice.value = '今日盐摄入量超标，应减少含盐高的食物摄入。';
    } else {
      specificAdvice.value = '饮食较为清淡，符合高血压饮食要求。';
    }
  }
};

// 页面加载时初始化图表（空数据初始化）
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = ['日期'];
  const yAxisData = [0];
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '指标',
        type: 'line',
        data: yAxisData,
        lineStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };
  myChart.setOption(option);
});

// 监听饮食记录变化，更新图表（待完善真实数据和分析逻辑）
watch(dietRecords, () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = dietRecords.value.map((record) => record.date);
  const yAxisData = [0]; // 待完善真实数据计算
  myChart.setOption({
    xAxis: {
      data: xAxisData
    },
    series: [
      {
        data: yAxisData
      }
    ]
  });
}, { deep: true });
</script>

<style scoped>
.chronic-disease-management-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.patient-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.diet-record-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.diet-form {
  margin-top: 20px;
}
.form-title {
  color: #303133;
  margin-bottom: 10px;
}
.input-record {
  width: 100%;
  margin-bottom: 10px;
}
.nutrition-advice-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.indicator-analysis-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}
</style>
